<template>
	<page-wraper :safeAreaInsetBottom="false">
		<view class="container">
			<!-- 标题部分 -->
			<view class="header">
				<text class="title">美&加易行邮</text>
				<view class="subtitle">易通安达与中国邮政战略合作伙伴</view>
			</view>

			<!-- 服务介绍 -->
			<view class="service-intro">
				<text class="text-content">
					专为美国和加拿大的留学生/华人/华侨等，提供个人行李和物品寄送回国的民生服务。
				</text>
			</view>

			<!-- 公司简介 -->
			<view class="company-info">
				<view class="info-item">
					<text class="label">成立时间：</text>
					<text>2010年</text>
				</view>
				<view class="info-item">
					<text class="label">注册资金：</text>
					<text>5000万</text>
				</view>
				<view class="info-item">
					<text class="label">总部位置：</text>
					<text>深圳（总部大楼超8000平方米）</text>
				</view>
				<view class="info-item">
					<text class="label">团队规模：</text>
					<text>600余人</text>
				</view>
			</view>

			<!-- 企业优势 -->
			<view class="advantages">
				<view class="section-title">企业优势</view>
				<view class="advantage-list">
					<text>• 国家高新技术企业认证</text>
					<text>• AAAA级物流企业</text>
					<text>• 自主研发物流管理系统</text>
					<text>• 多项发明专利和著作权</text>
				</view>
			</view>

			<!-- 业务范围 -->
			<view class="business-scope">
				<view class="section-title">业务范围</view>
				<view class="scope-list">
					<text>• 粤港跨境运输及香港仓配</text>
					<text>• 国际货运代理</text>
					<text>• 跨境电商物流及海外仓服务</text>
					<text>• 大件散杂服务</text>
					<text>• 一键通供应链服务</text>
					<text>• 国内仓配及干线物流</text>
				</view>
			</view>

			<!-- 服务覆盖 -->
			<view class="coverage">
				<view class="section-title">服务覆盖</view>
				<text class="text-content">
					业务辐射全国200多个中大城市及北美洲、南美洲等国家和地区
				</text>
			</view>

			<!-- 联系方式板块 -->
			<view class="contact-section">
				<view class="section-title">联系我们</view>

				<view class="contact-item">
					<view class="contact-label">
						<text class="icon">📍</text>
						<text>公司总部：</text>
					</view>
					<text class="contact-content">深圳市龙华区大浪街道华荣社区鸿德路1号A栋易通安达物流中心</text>
				</view>

				<view class="contact-item">
					<view class="contact-label">
						<text class="icon">📞</text>
						<text>联系电话：</text>
					</view>
					<text class="contact-content" @click="copyPhone">0086-0755-82846135</text>
				</view>

				<view class="contact-item">
					<view class="contact-label">
						<text class="icon">🌐</text>
						<text>官方网址：</text>
					</view>
					<text class="contact-content link" @click="copyWebsite">www.ytad-logistics.com</text>
				</view>
			</view>
		</view>
	</page-wraper>
</template>

<script lang="ts" setup>
	function copyPhone() {
		wx.setClipboardData({
			data: '0086-0755-82846135',
			success: function () {
				wx.showToast({
					title: '电话已复制',
					icon: 'success',
					duration: 2000
				})
			}
		})
	}

	function copyWebsite() {
		wx.setClipboardData({
			data: 'www.ytad-logistics.com',
			success: function () {
				wx.showToast({
					title: '网址已复制',
					icon: 'success',
					duration: 2000
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.page-wraper) {
		background: #f6f6f6;
	}

	.container {
		padding: 30rpx;
		background: #f8f8f8;
	}

	.header {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
	}

	.subtitle {
		font-size: 28rpx;
		color: #666;
		margin-top: 10rpx;
	}

	.service-intro {
		background: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}

	.company-info {
		background: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}

	.info-item {
		display: flex;
		margin: 10rpx 0;
	}

	.label {
		color: #666;
		width: 160rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin: 20rpx 0;
		padding-left: 20rpx;
		border-left: 8rpx solid #1aad19;
	}

	.advantages,
	.business-scope,
	.coverage {
		background: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}

	.advantage-list text,
	.scope-list text {
		display: block;
		margin: 10rpx 0;
		color: #666;
		padding-left: 20rpx;
	}

	.text-content {
		color: #666;
		line-height: 1.6;
	}

	.contact-section {
		background: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}

	.contact-item {
		margin: 20rpx 0;
	}

	.contact-label {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		color: #333;
		font-weight: 500;
	}

	.icon {
		margin-right: 10rpx;
		font-size: 32rpx;
	}

	.contact-content {
		color: #666;
		font-size: 28rpx;
		line-height: 1.6;
		padding-left: 42rpx;
	}

	.link {
		color: #1aad19;
		text-decoration: underline;
	}
</style>